<template>
  <MainLayout>
    <view class="page">
      <!-- 顶部信息容器 -->
      <view class="user-info-container">
        <!-- 头像 + 名称UID + 设置按钮 -->
        <view class="user-header">
          <view class="avatar-container">
            <image :src="userInfo.avatarUrl || '/static/icons/default-avatar.png'" mode="aspectFill" class="avatar-img" @click="editProfile"></image>
          </view>

          <!-- 名称和UID -->
          <view class="name-uid">
            <view class="user-name" @click="editProfile">
              <text class="name">{{ isLogin ? (userInfo.nickname || '未知用户') : '请点击登录' }}</text>
            </view>
            <view class="uid" v-if="isLogin">
              <text>UID: {{ formatUserId(userInfo.userId || '0') }}</text>
            </view>
          </view>

          <!-- 设置按钮 -->
          <view class="setting-btn" @click="goToSetting">
            <image src="/static/icons/set.svg" mode="aspectFit" class="setting-icon"></image>
          </view>
        </view>

        <!-- 个性签名（单独一行） -->
        <view class="signature">
          <text>{{ isLogin ? (userInfo.signature || '点击添加个性签名') : '登录后可添加个性签名' }}</text>
        </view>

        <!-- 粉丝/关注/获赞（单独一行） -->
        <view class="stats">
          <view class="stats-item">
            <text class="stats-number">{{ isLogin ? (userInfo.fansCount || 0) : 0 }}</text>
            <text class="stats-label">粉丝</text>
          </view>
          <view class="stats-item">
            <text class="stats-number">{{ isLogin ? (userInfo.followCount || 0) : 0 }}</text>
            <text class="stats-label">关注</text>
          </view>
          <view class="stats-item">
            <text class="stats-number">{{ isLogin ? (userInfo.likeCount || 0) : 0 }}</text>
            <text class="stats-label">获赞</text>
          </view>
        </view>
      </view>

      <!-- 发布收藏标签 -->
      <view class="tabs">
        <view class="tab active">发布</view>
        <view class="tab">收藏</view>
      </view>

      <!-- 动态列表 -->
      <view class="dynamic-list">
        <view v-if="!isLogin" class="login-prompt">
          <text>登录后可查看您的动态</text>
        </view>
        <view v-else>
          <!-- 动态内容区域 -->
        </view>
      </view>
    </view>
  </MainLayout>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import MainLayout from '../../layout/MainLayout.vue'
import userApi from '../../http/models/user.ts'

// 登录状态
const isLogin = ref(false)
// 用户信息
const userInfo = ref({})

// 跳转到登录页
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}

// 跳转到设置页
const goToSetting = () => {
  if (!isLogin.value) {
    goToLogin()
    return
  }

  uni.navigateTo({
    url: '/pages/mine/settings'
  })
}

// 编辑个人资料
const editProfile = () => {
  if (!isLogin.value) {
    goToLogin()
    return
  }

  uni.navigateTo({
    url: '/pages/mine/edit-profile'
  })
}

// 格式化用户ID（补0到8位）
const formatUserId = (userId) => {
  if (!userId) return '00000000'
  return userId.toString().padStart(8, '0')
}

// 检查登录状态
const checkLoginStatus = async () => {
  const token = uni.getStorageSync('token')
  if (token) {
    isLogin.value = true
    try {
      const storedUserInfo = uni.getStorageSync('userInfo')
      if (storedUserInfo) {
        userInfo.value = storedUserInfo
        console.log('用户信息', userInfo.value)
      }
    } catch (error) {
      console.error('获取用户信息失败', error)
    }
  }
}

// 页面显示时刷新用户信息
const onPageShow = () => {
  checkLoginStatus()
}

onMounted(() => {
  checkLoginStatus()
  uni.$on('onPageShow', onPageShow)
})

onUnmounted(() => {
  uni.$off('onPageShow', onPageShow)
})
</script>

<style scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f2eb;
  padding-bottom: 60px;
  box-sizing: border-box;
}

/* 用户信息容器 */
.user-info-container {
  margin-top: 40px;
  padding: 20px 15px;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
}

/* 头像+名称UID+设置按钮 横向布局 */
.user-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar-container {
  flex-shrink: 0;
}

.avatar-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #4CAF50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 名称和UID 垂直布局 */
.name-uid {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.user-name {
  cursor: pointer;
}

.name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.uid {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 5px;
}

/* 设置按钮 */
.setting-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f2eb;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.setting-btn:active {
  transform: scale(0.95);
  background-color: #e0dcd1;
}

.setting-icon {
  width: 22px;
  height: 22px;
  color: #333;
}

/* 个性签名（单独一行） */
.signature {
  margin-top: 15px;
  cursor: pointer;
}


/* 粉丝/关注/获赞（单独一行） */
.stats {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.stats-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stats-number {
  font-size: 20px;
  font-weight: 700;
  color: #4CAF50;
}

.stats-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
}

/* 标签样式 */
.tabs {
  display: flex;
  padding: 15px 15px 0;
  background: white;
  margin-top: 10px;
}

.tab {
  font-size: 17px;
  font-weight: 500;
  padding: 12px 20px 10px;
  margin: 0 5px;
  color: rgba(0, 0, 0, 0.7);
  position: relative;
  cursor: pointer;
  border-radius: 12px 12px 0 0;
}

.tab.active {
  color: #4CAF50;
  background-color: #f9f9f9;
  font-weight: 600;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4CAF50;
  border-radius: 2px;
}

/* 动态列表 */
.dynamic-list {
  margin: 0 10px;
  min-height: 300px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
}

.login-prompt {
  text-align: center;
  padding: 50px 20px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
}
</style>